<template>
  <div class="sign">
    <div class="base">
      <h3>登录</h3>
      <el-form ref="form" :model="form">
        <el-input v-model="form.name" class="input_width" placeholder="账户"></el-input>
        <el-input v-model="form.password" class="input_width" placeholder="密码"></el-input>
      </el-form>
      <div class="login_button" @click="login">
        登录
      </div>
      <a href="" style="float: right;color:#107FF4;margin-top: 10px;">
        忘记密码？
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      form: {
        name: '',
        password: ''
      }
    }
  },
  methods: {
    login: function () {
      var ipcRenderer = window.require('electron').ipcRenderer
      ipcRenderer.send('switch-page', '#/principal')

      window.location.href = '#/province'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.sign{
  width: 100%;
  position: fixed;
  min-height: 600px;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(~static/assets/img/bg.png) no-repeat center center;
  background-size:cover;
  background-attachment: fixed;
}
.head_top{
  padding: 20px;
}
.head_top div{
  color: #fff;
  padding-top: 15px;
  margin-left: 7px;
}
@media screen and (min-width: 1586px){
  .base{
    width: 330px;
    height: 380px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    right: 13%;
    margin-top: -10%;
    opacity: 0.9
  }
}
@media screen and (max-width: 1366px){
  .base{
    width: 330px;
    height: 380px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    right: 10%;
    margin-top: -13%;
    opacity: 0.9
  }
}
@media screen and (min-width: 1367px) and (max-width: 1585px){
  .base{
    width: 330px;
    height: 380px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    right: 15%;
    margin-top: -150px;
    opacity: 0.9
  }
}
.base h3{
  text-align: center;
  margin:40px 0;
  font-size: 22px;
  font-weight: 600;
  color: #052079;
  letter-spacing: 8px;
}
.login_button{
  background: -webkit-gradient(linear, left top, right top, from(#1086FD) , to(#1443A8));
  background: linear-gradient(to right, #1086FD, #1443A8);
  width: 270px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  margin-top: 30px;
  border-radius: 5px;
  font-size: 16px;
  letter-spacing: 3px;
}
</style>
